<div class="sim">
  <div class="wallpaper" *ngIf="settings.simThemeImages.length > 0">
    <app-swiper
      [images]="settings.simThemeImages"
      [autoplay]="settings.simThemeAutoplay"
      [height]="settings.simThemeHeight"
    >
      <div class="bar">
        <h1 class="title dark-white">
          {{ settings.simTitle || settings.title }}
        </h1>
        <pre class="description dark-white" [innerHTML]="description"></pre>
        <app-search-engine />
      </div>
    </app-swiper>
  </div>

  <nav class="top-nav user-select-none dark-border-color">
    <a
      *ngFor="let item of websiteList; let i = index"
      [class.active]="page === i"
      [class.dark-text-active]="page === i"
      class="ripple-btn dark-text"
      (click)="handleCilckTopNav(i)"
    >
      {{ item.title }}
    </a>
  </nav>

  <div class="wrapper">
    <nav class="sidebar dark-bg" id="sidebar">
      <div *ngIf="websiteList[page]?.nav?.length">
        <div
          *ngFor="let item of websiteList[page].nav; let i = index"
          (click)="handleSidebarNav(i)"
          [class.active]="id === i"
          [class.dark-item-active]="id === i"
          class="ripple-btn dark-text dark-hover"
        >
          {{ item.title }}
        </div>
      </div>
    </nav>

    <aside class="site-box dark-bg">
      <div *ngIf="currentList.length > 0; else noData">
        <div *ngFor="let item of currentList.slice(0, sliceMax); let i = index">
          <div class="nav-wrapper">
            <app-toolbar-title
              [dataSource]="item"
              (onCollapse)="onCollapse(item, i)"
              [index]="i"
            ></app-toolbar-title>

            <div
              nz-row
              [nzGutter]="[16, 16]"
              [style.display]="item.collapsed ? 'none' : ''"
            >
              <div
                class="gutter-row"
                nz-col
                [nzSpan]="8"
                *ngFor="let el of item.nav.slice(0, sliceMax); index as j"
              >
                <app-card
                  [cardStyle]="settings.simCardStyle"
                  [dataSource]="el"
                  [indexs]="[page, id, i, j]"
                ></app-card>
              </div>
            </div>
          </div>
        </div>
      </div>

      <ng-template #noData>
        <app-no-data></app-no-data>
      </ng-template>
    </aside>
  </div>
</div>

<app-footer className="sim-footer"></app-footer>
<app-fixbar (onCollapse)="onCollapseAll()" [collapsed]="collapsed()">
</app-fixbar>

<div class="sim-bg dark-bg"></div>
